<template>
  <div class="login">
    <div class="login-left"></div>
    <div class="login-right">
      <div class="login-box">
        <div class="login-cls">
          <a-row justify="center" class="login-logo">
            <SvgIcon v-if="appIdentify" class="item-icon" :name="`${appIdentify}-login`" />
          </a-row>
          <a-row justify="center" class="login-title">
            {{ title }}
          </a-row>
          <a-row justify="center" class="login-input">
            <a-form
              :model="loginForm"
              name="basic"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 18 }"
              autocomplete="off"
              @finish="handleSubmit"
            >
              <a-form-item
                name="Username"
                :rules="[{ required: true, message: '用户名不能为空!' }]"
              >
                <a-input v-model:value="loginForm.Username" placeholder="用户名" class="input-item">
                  <template #prefix>
                    <user-outlined />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item name="Password" :rules="[{ required: true, message: '密码不能为空!' }]">
                <a-input-password
                  v-model:value="loginForm.Password"
                  placeholder="密码"
                  class="input-item"
                  autocomplete
                >
                  <template #prefix>
                    <lock-outlined />
                  </template>
                </a-input-password>
              </a-form-item>

              <a-form-item>
                <a-button
                  type="primary"
                  html-type="submit"
                  :loading="loginLoading"
                  style="margin-top: 20px"
                  class="button-normal"
                >
                  登录
                </a-button>
              </a-form-item>
            </a-form>
          </a-row>
        </div>
      </div>
      <div class="version-box">版本 {{ version }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import type { LoginInfo } from '#/login'
import { login } from '@/api/login/index'
import { useUserStore } from '@/stores/user'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import { useSettingsStore } from '@/stores/settings'

const settingsStore = useSettingsStore()
const appIdentify = settingsStore.getSystemIdentify()
const title = window.systemName

const userStore = useUserStore()
const loginForm = reactive<LoginInfo>({
  Username: '',
  Password: ''
})
const loginLoading = ref(false)
const version = window.version
const route = useRoute()
const handleSubmit = async () => {
  loginLoading.value = true
  const redirect: string = (route.query.redirect as string) || ''
  login(loginForm)
    .then(async (res) => {
      // 数据存储
      userStore.setToken(res.data.token)
      userStore.setUserInfo(res.data.user)
      await userStore.afterLoginAction()
      if (userStore.currentMenus.length > 0) {
        message.success('登录成功！')
        router.push({
          path: redirect || userStore.homeMenu
        })
      } else {
        message.error('获取用户权限失败：请联系管理员检查当前用户权限是否为空！')
        userStore.logout()
      }
      loginLoading.value = false
    })
    .catch(() => {
      loginLoading.value = false
    })
}

onMounted(() => {
  // 有token跳转到首页
  if (userStore.getToken) {
    router.push({
      path: userStore.homeMenu
    })
  } else {
    // 没token清理缓存
    localStorage.clear()
  }
})
</script>

<style lang="less" scoped>
.login {
  display: flex;
  flex: 1;
  background-size: cover;
  .login-left {
    flex: 0 0 auto;
    width: 680px;
    background-image: url('@/assets/images/system/backgroud-left.png');
    background-repeat: no-repeat;
    background-position: center;
  }
  .login-right {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    align-items: center;

    width: 420px;
    background-image: url('@/assets/images/system/backgroud.png');
  }
  .login-box {
    display: flex;
    align-items: center;
    flex: 1;
    .login-cls {
      width: 460px;
      .login-logo {
        height: 38px;
        .item-icon {
          width: 416px;
          height: 48px;
        }
      }
      .login-title {
        margin-top: 20px;
        font-family: HarmonyOS Sans SC;
        font-size: 32px;
        height: 32px;
        line-height: 32px;
        font-weight: 500;
      }
      .login-input {
        margin-top: 60px;
        .input-item,
        .button-normal {
          width: 416px;
          height: 40px;
        }
      }
    }
  }

  .version-box {
    flex: 0 0 auto;
    height: 54px;
    color: #8c8c8c;
  }
}
</style>
